<template>
  <div class="cart-page">
    <div class="page-header">
      <h1>购物车</h1>
      <p v-if="authStore.isLoggedIn">{{ authStore.user?.name || authStore.user?.username }}的购物车</p>
      <p v-else>请登录后查看购物车</p>
    </div>

    <div class="cart-container">
      <!-- 未登录状态 -->
      <el-card v-if="!authStore.isLoggedIn" class="login-prompt-card">
        <div class="login-prompt-content">
          <el-icon size="100" color="#ccc"><User /></el-icon>
          <h3>请先登录</h3>
          <p>登录后可以查看和管理购物车中的商品</p>
          <div class="login-actions">
            <el-button type="primary" size="large" @click="showLoginDialog = true">
              立即登录
            </el-button>
            <el-button size="large" @click="$router.push('/')">
              继续购物
            </el-button>
          </div>
        </div>
      </el-card>

      <!-- 登录后购物车为空 -->
      <el-card v-else-if="authStore.isLoggedIn && cartStore.items.length === 0" class="empty-cart">
        <div class="empty-content">
          <el-icon size="100" color="#ccc"><ShoppingCart /></el-icon>
          <h3>购物车为空</h3>
          <p>快去挑选心仪的商品吧</p>
          <el-button type="primary" @click="$router.push('/phones')">去购物</el-button>
        </div>
      </el-card>

      <!-- 登录后购物车有商品 -->
      <div v-else>
        <el-table :data="cartStore.items" class="cart-table">
          <el-table-column label="商品" width="300">
            <template #default="{ row }">
              <div class="product-info">
                <img :src="row.image" :alt="row.name" class="product-image">
                <div class="product-details">
                  <h4 class="product-name">{{ row.name }}</h4>
                  <p class="product-desc">{{ row.description }}</p>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="单价" width="120">
            <template #default="{ row }">
              ¥{{ row.price }}
            </template>
          </el-table-column>

          <el-table-column label="数量" width="150">
            <template #default="{ row }">
              <el-input-number
                  v-model="row.quantity"
                  :min="1"
                  :max="10"
                  @change="updateQuantity(row.id, row.quantity)"
              />
            </template>
          </el-table-column>

          <el-table-column label="小计" width="120">
            <template #default="{ row }">
              ¥{{ (row.price * row.quantity).toFixed(2) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <el-button type="danger" link @click="removeItem(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="cart-summary">
          <div class="summary-info">
            <p>共 {{ cartStore.totalItems }} 件商品</p>
            <p class="total-price">
              总计：<span class="price">¥{{ cartStore.totalPrice.toFixed(2) }}</span>
            </p>
          </div>
          <div class="summary-actions">
            <el-button @click="$router.push('/phones')">继续购物</el-button>
            <el-button type="primary" size="large" @click="checkout">
              去结算
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 登录弹窗 -->
    <el-dialog
        v-model="showLoginDialog"
        title="登录"
        width="400px"
        :before-close="handleLoginClose"
    >
      <div class="login-dialog-content">
        <p>请登录后继续操作</p>
        <div class="dialog-actions">
          <el-button @click="showLoginDialog = false">取消</el-button>
          <el-button type="primary" @click="goToLogin">立即登录</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { User, ShoppingCart } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useCartStore } from '@/stores/cart'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const cartStore = useCartStore()
const authStore = useAuthStore()

const showLoginDialog = ref(false)

const updateQuantity = (productId, quantity) => {
  cartStore.updateQuantity(productId, quantity)
  ElMessage.info('已更新商品数量')
}

const removeItem = (productId) => {
  cartStore.removeFromCart(productId)
  ElMessage.success('已从购物车移除商品')
}

const checkout = () => {
  if (cartStore.items.length === 0) {
    ElMessage.warning('购物车为空，无法结算')
    return
  }
  ElMessage.success('跳转到结算页面')
  // 实际项目中这里会跳转到结算页面
}

const goToLogin = () => {
  showLoginDialog.value = false
  // 触发登录弹窗显示
  const event = new CustomEvent('showLoginDialog')
  window.dispatchEvent(event)
}

const handleLoginClose = (done) => {
  done()
}
</script>

<style scoped>
.cart-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #c7000a;
  font-size: 32px;
  margin-bottom: 10px;
}

.page-header p {
  color: #666;
  font-size: 16px;
}

.login-prompt-card {
  text-align: center;
  padding: 60px 0;
}

.login-prompt-content h3 {
  margin: 20px 0 10px;
  color: #666;
}

.login-prompt-content p {
  color: #999;
  margin-bottom: 30px;
}

.login-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.empty-cart {
  text-align: center;
  padding: 60px 0;
}

.empty-content h3 {
  margin: 20px 0 10px;
  color: #666;
}

.empty-content p {
  color: #999;
  margin-bottom: 30px;
}

.cart-table {
  margin-bottom: 30px;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.product-details {
  flex: 1;
}

.product-name {
  margin: 0;
  font-weight: 500;
  color: #333;
}

.product-desc {
  margin: 5px 0 0;
  color: #666;
  font-size: 12px;
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}

.summary-info p {
  margin: 5px 0;
}

.total-price {
  font-size: 18px;
  font-weight: bold;
}

.price {
  color: #c7000a;
  font-size: 24px;
}

.summary-actions {
  display: flex;
  gap: 15px;
}

.login-dialog-content {
  text-align: center;
  padding: 20px 0;
}

.login-dialog-content p {
  margin-bottom: 30px;
  color: #666;
}

.dialog-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}
</style>